<script setup>

import CustomInput from "@/components/CustomInput.vue";
import {ref} from "vue";
import Loader from "@/components/Loader.vue";
import {useRoute, useRouter} from "vue-router";
import request from "@/assets/request.js";
import store from "@/store.js";


const route = useRoute()
const router = useRouter()
const errors = ref([])
const addEmail = ref(null)
const accesses = ref([])
const showLoader = ref(true)

const file_id = ref(route.params.id)

const getAccesses = async () => {
  const response =  await request('files/disk', 'GET', null, true)
  if (response.status === 200) {
    const file = response.message.find((item) => {
      return item.file_id === file_id.value
    })
    if (file == null) {
      console.log(1)
      router.push('/')
    }
    accesses.value = file.accesses.filter((item) => {
      return item.type === "co-author"
    })

    showLoader.value = false
  }
  if (response.status === 403 && response.message.message === "Forbidden for you") {
    store.methods.exit(router)
  }
}

const removeAccess = async (email) => {
  const response = await request(`files/${file_id.value}/accesses`, 'DELETE', {email: email}, true)
  if (response.status === 200) {
    accesses.value.splice(accesses.value.findIndex((item) => {
      return  item.email === email
    }),1)
  }
}

const addAccess = async () => {
  const response = await request(`files/${file_id.value}/accesses`, 'POST', {email: addEmail.value}, true)
  if (response.status === 200) {
    await getAccesses()
    return
  }
  if (response.status === 422) {
    errors.value = response.message.message
  } else {
    errors.value = []
  }
}




getAccesses()
</script>

<template>
<div class="container-start">
  <h2>Редактирование доступа к файлу</h2>

  <form class="add-form" @submit.prevent="addAccess">
      <CustomInput placeholder="Email" type="text" :error="errors['email']" v-model="addEmail" />
      <input type="submit" value="Добавить">
  </form>

  <transition-group name="grid" tag="div" class="grid-files">
      <div class="file-card" v-for="user in accesses" :key="user.email" >
        <span class="files-info"><span class="files-info-title">Email: </span>{{ user.email }}</span>
        <span class="files-info"><span class="files-info-title">Имя: </span>{{ user.fullname }}</span>
        <div class="file-buttons">
          <button class="remove" @click="removeAccess(user.email)">Убрать доступ</button>
        </div>
      </div>
  </transition-group>

  <Loader :show="showLoader"></Loader>
</div>
</template>

<style scoped>
  input[type=submit] {
    width: 400px;
    background: #2c3e50;
    outline: none;
    padding: 11px 13px;
    border-radius: 24px;
    color: white;
    font-size: 16px;
    transition: all ease-in-out .25s, margin-bottom 0s;
    border: #3cff95 solid 3px;
    cursor: pointer;
  }

  input[type=submit]:hover {
    box-shadow: 0px 0px 7px 3px #42b883;
  }

  .add-form {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
  }

  .grid-files {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 50px;
    width: 100%;
  }

  .file-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: #2c3e50;
    border: 3px #2c3e50 solid;
    border-radius: 16px;
    transition: all .25s ease-in-out;
  }

  .file-card:hover {
    border: 3px #42b883 solid;
    box-shadow: 0px 0px 7px 3px #42b883;
  }

  .files-info {
    font-size: 16px;
  }

  .files-info-title {
    color: white;
  }

  .file-buttons {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 10px;
  }

  button {
    padding: 10px 12px;
    background: #282828;
    color: white;
    outline: none;
    border: #282828 2px solid;
    font-size: 16px;
    border-radius: 8px;
    transition: all .5s;
  }

  .remove:hover {
    box-shadow: 0px 0px 7px 3px #ff3e51;
    border: #ff3e51 2px solid;
  }

  .grid-enter, .grid-leave-to {
    opacity: 0;
  }

  .grid-leave-active {
    position: absolute;
  }

</style>